<template>
  <div id="productListTwo">
    <el-container>
      <el-aside width="470px"
                v-loading="loading"
                element-loading-text="Loading"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)">
        <f-scroll :scrollStyle="wrapStyle"
                  @scrollToEnd="scrollToEnd">
          <div>
            <el-card v-for="(item, index) in products"
                     :class="{active: index === active}"
                     :key="item.id">
              <div @click="cardSelect(index)">
                <div class="fl">
                  <div class="img-wrap">
                    <img :src="item.url"
                         draggable="false"
                         alt="">
                  </div>
                </div>
                <div class="right">
                  <div class="price-and-count">
                    <span class="price">${{item.price.USD | priceFilter}}</span>
                    <span class="count">{{item.saleCount}}&nbsp;items sold</span>
                  </div>
                  <div class="desc">
                    <span>{{item.brand}}&nbsp;{{item.model}}&nbsp;{{item.type}}&nbsp;</span>
                  </div>
                  <div class="from">
                    <span>{{item.retailer}}</span>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </f-scroll>
      </el-aside>
      <el-main>
        <f-scroll :scrollStyle="rightWrapStyle"
                  :id="555555">
          <div class="content">
            <div class="header">
              <div class="fl">
                <p class="desc">{{activeItem.brand}}&nbsp;{{activeItem.type}}&nbsp;{{activeItem.width}}cm</p>
                <p class="from">Retailer: {{activeItem.retailer}}</p>
                <p class="brand">Brand: {{activeItem.brand}}</p>
              </div>
              <div class="fr" v-if="activeItem && activeItem.price">
                <p class="price">USD: $ {{ activeItem.price.USD }}</p>
                <p class="hkd">HKD: $ {{ activeItem.price.HKD}}</p>
                <p class="cny">CNY: ￥ {{ activeItem.price.CNY}}</p>
                <p class="jpy">JPY: ￥ {{ activeItem.price.JPY}}</p>
                <p class="eur">EUR: € {{ activeItem.price.EUR}}</p>
              </div>
            </div>
            <div class="base-information">
              <el-row>
                <el-col :span="6"
                        class="img-wrap">
                  <img draggable="false"
                       :src="activeItem.url"
                       alt="">
                </el-col>
                <el-col :span="9">
                  <div class="rl">
                    <p class="retailer">
                      <span class="key">Retailer&nbsp;Product&nbsp;ID:&nbsp;</span>
                      <a class="value"
                         :href="activeItem.source_url"
                         target="__blank"
                         v-if="activeItem.source_url">{{activeItem.retailerProductId}}</a>
                      <span v-else
                            class="value">{{activeItem.retailerProductId}}</span>
                    </p>
                    <p>
                      <span class="key">Region:&nbsp;</span>
                      <span class="value">{{activeItem.region}}</span>
                    </p>
                    <p>
                      <span class="key">Discounted:&nbsp;</span>
                      <span class="value">NO</span>
                    </p>
                    <!-- <p>
                      <span class="key">Stock:&nbsp;</span>
                      <span class="value">5</span>
                    </p> -->
                  </div>
                </el-col>
                <el-col :span="9">
                  <div class="rr">
                    <p>
                      <span class="key">Color:&nbsp;</span>
                      <span class="value">{{activeItem.color}}</span>
                    </p>
                    <p>
                      <span class="key">Type:&nbsp;</span>
                      <span class="value">{{activeItem.type}}</span>
                    </p>
                    <p>
                      <span class="key">Material:&nbsp;</span>
                      <span class="value">{{activeItem.material}}</span>
                    </p>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="details">
              <div class="title">Product details</div>
              <div class="imgs">
                <el-card v-for="item in imgs"
                         :key="item.id">
                  <img :src="item.url"
                       @error="imgLoadError(item)"
                       draggable="false"
                       alt="">
                </el-card>
              </div>
            </div>
            <div class="priceIndex">
              <div class="select-wrap">
                <el-select v-model="price_group"
                           @change="priceGroupChange"
                           placeholder="请选择">
                  <el-option v-for="item in options"
                             :key="item.id"
                             :label="item.label"
                             :value="item.id">
                  </el-option>
                </el-select>
              </div>
              <div class="title">Pricing</div>
              <div id="priceIndex"
                   v-if="cShow"></div>
            </div>
          </div>
        </f-scroll>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { lineOption, lineSerie } from "@/echart/echart-option";
import { fixPercent, timeTransform } from "@/util/tool";

export default {
  data() {
    return {
      products: [],
      scrollOption: "",
      loading: false,
      active: 0,
      activeItem: "",
      imgs: [],
      wrapStyle: {
        width: "23.5rem",
        height: ""
      },
      rightWrapStyle: {
        height: "300px"
      },
      params: {
        per_page: 20,
        page: 1,
        sortBy: "price",
        keyword: ""
      },
      lastPage: 1,
      cShow: false,
      price_group: 0,
      options: [{ label: "Retailer", id: 0 }, { label: "Country", id: 1 }]
    };
  },
  created() {
    this.getData();
  },
  filters: {
    cny(val) {
      return fixPercent(val * 6.314);
    },
    jpy(val) {
      return fixPercent(val * 105.84);
    },
    eur(val) {
      return fixPercent(val * 0.8079);
    },
    hkd(val) {
      return fixPercent(val * 7.8417);
    }
  },
  computed: {
    ...mapGetters(["sortBy", "keyWords", "imgUrl", "activeName", "showStyle"])
  },
  mounted() {
    let dom = document.getElementById("productListTwo");
    let len = document.body.clientHeight - dom.offsetTop;
    let main = document.querySelector(".el-main");
    this.wrapStyle.height = len - 80 + "px";
    this.rightWrapStyle.height = len - 80 + "px";
    window.onresize = () => {
      let len = document.body.clientHeight - dom.offsetTop;
      this.wrapStyle.height = len - 80 + "px";
      this.rightWrapStyle.height = len - 80 + "px";
    };
  },
  methods: {
    getData(val = this.sortBy) {
      this.loading = true;
      let params = Object.assign({}, this.params);
      params.filter = this.filter;
      params.keyWord = this.keyWords;
      params.sortBy = [this.params.sortBy, val];
      this.$http.post("goods", params).then(
        res => {
          setTimeout(() => {
            this.loading = false;
          }, 150);
          if (res.data) {
            res.data.forEach(item => {
              if (item.model.indexOf("none") !== -1) {
                item.model = "";
              }
              item.url = this.imgUrl + item.retailerProductId + "/1.jpg";
            });
            this.products = this.products.concat(res.data);
            this.params.page = res.current_page + 1;
            this.lastPage = res.last_page;
            this.getDetail();
          }
        },
        err => {
          this.loading = false;
          this.$message.error("服务器错误!!!");
        }
      );
    },
    getDetail() {
      this.activeItem = this.products[this.active];
      let img_count = this.activeItem.img_count;
      let imgs = [];
      for (let i = 1; i <= img_count; i++) {
        imgs.push({
          url:
            this.imgUrl + this.activeItem.retailerProductId + "/" + i + ".jpg",
          id: i * 10000
        });
      }

      this.imgs = imgs;
      this.$http
        .get(
          "goods/" +
            this.activeItem.goods_id +
            `?price_group=${this.price_group}`
        )
        .then(res => {
          this.cShow = true;
          let img_count = res.img_count;

          this.$nextTick(() => {
            let time_arr = timeTransform(res.time_range);
            this.activeItem = res;
            this.activeItem.url = this.imgs[0].url;
            let chart = this.$echarts.init(
              document.getElementById("priceIndex")
            );
            let sameInfoGoods = res.same_info_goods;
            let serie_arr = [];
            let legendArr = sameInfoGoods.map(item => item.name);
            let min;
            let max;
            if (sameInfoGoods.length && sameInfoGoods[0].price_history.length) {
              min = sameInfoGoods[0].price_history[0].avg_price;
              max = sameInfoGoods[0].price_history[0].avg_price;
            }
            sameInfoGoods.forEach(item => {
              let price_history = item.price_history;
              let name = item.name;
              let avg_arr = price_history.map(item =>
                fixPercent(item.avg_price)
              );
              avg_arr.forEach(item => {
                if (item > max) {
                  max = item;
                } else if (item < min) {
                  min = item;
                }
              });
              serie_arr.push(new lineSerie(name, avg_arr));
            });
            let line = new lineOption(time_arr, serie_arr, legendArr, min, max);
            chart.setOption(line);
          });
        });
    },
    priceGroupChange() {
      this.cShow = false;
      this.getDetail();
    },
    imgLoadError(item) {
      item.show = false;
    },
    refresh(val = this.sortBy) {
      this.params.page = 1;
      this.active = 0;
      this.products = [];
      this.getData(val);
    },
    cardSelect(index) {
      this.active = index;
      this.getDetail();
    },
    scroll() {},
    scrollToEnd() {
      if (this.params.page < this.lastPage) {
        this.getData();
      }
    }
  },
  watch: {
    sortBy(val, old) {
      switch (val) {
        case 0:
          this.params.sortBy = "price";
          this.refresh(0);
          break;
        case 1:
          this.params.sortBy = "price";
          this.refresh(1);
          break;
        case 2:
          this.params.sortBy = "sales_volume";
          this.refresh(0);
          break;
        case 3:
          this.params.sortBy = "sales_volume";
          this.refresh(1);
          break;
      }
    },
    keyWords(val, old) {
      this.refresh();
    },
    activeName(val, old) {
      if (this.showStyle === "column" && val === "first") {
        this.refresh();
      }
    },
    filter(curVal, oldVal) {
      if (this.showStyle === "column" && this.activeName === "first") {
        this.refresh();
      }
    }
  }
};
</script>

<style lang="scss">
@import "../../../assets/styles/color.scss";
@import "../../../assets/styles/mixins.scss";

#productListTwo {
  font-family: "PingFang SC";
  padding-left: 20px;
  padding-right: 3px;
  .el-aside {
    flex-basis: 24rem;
    .el-card {
      &.active {
        border: 2px solid $base;
      }
      &:hover {
        transform: translate3d(0, -2px, 0);
        transition: 0.5s ease-in-out;
      }
      cursor: pointer;
      width: 22.5rem;
      margin-right: 10px;
      margin-bottom: 10px;
      .el-card__body {
        padding: 0;
        .fl {
          border-right: 1px solid #e6e6e6;
        }
        .right {
          overflow: hidden;
          padding: 20px;
          .price-and-count {
            height: 40px;
            line-height: 40px;
            font-size: 1rem;
            .price {
              float: left;
              color: $base;
              font-family: "Georgia";
              font-weight: 600;
            }
            .count {
              float: right;
              color: #999999;
              font-size: 0.7rem;
              font-family: "PingFang SC";
            }
            @include clearfix();
          }
          .desc {
            line-height: 30px;
            height: 30px;
            font-size: 0.8rem;
            text-align: left;
            text-indent: 5px;
            color: #333333;
            font-family: "PingFang SC";
          }
          .from {
            @extend .desc;
            color: #b3b3b3;
            font-size: 0.7rem;
            color: #999999;
          }
        }
      }
      .img-wrap {
        width: 140px;
        height: 140px;
        img {
          width: 140px;
          height: 140px;
        }
      }
    }
  }
  .el-main {
    height: 100%;
    background-color: #fff;
    overflow-y: auto;
    padding-top: 0;
    padding-right: 0;
    flex: 1;
    .content {
      padding-right: 20px;
      .title {
        font-size: 1.2rem;
        color: #333333;
        text-align: left;
        line-height: 3rem;
        height: 3rem;
      }
      .header {
        @include clearfix();
        padding: 1rem 0;
        font-size: 0.9rem;
        color: #333333;
        border-bottom: 1px solid $grayLine;
        .fl {
          text-align: left;
          .desc {
            font-size: 1.2rem;
            color: #1a1a1a;
          }
        }
        .fr {
          text-align: right;
          p {
            line-height: 0.7rem;
          }
          .price {
            // line-height: 114px;
            font-size: 1rem;
            color: $base;
            font-family: "Georgia";
          }
        }
      }
      .base-information {
        border-bottom: 1px solid $grayLine;
        height: 10.5rem;
        box-sizing: padding-box;
        padding-top: 1.5rem;
        text-align: left;
        .img-wrap {
          text-align: center;
          img {
            margin-top: 20px;
            height: 7.5rem;
            width: 7.5rem;
          }
        }
        .el-col-9 {
          margin-top: 20px;
        }
        .key {
          color: #666666;
        }
        .value {
          color: #333333;
        }
      }
      .details {
        border-bottom: 1px solid $grayLine;
        .imgs {
          text-align: left;
          .el-card {
            display: inline-block;
            margin-right: 0.75rem;
            margin-bottom: 0.75rem;
            width: 16.5rem;
            height: 16.5rem;
            white-space: wrap;
            .el-card__body {
              padding: 0;
              img {
                width: 16.5rem;
                height: 16.5rem;
              }
            }
          }
          @media screen and (max-width: 1600px) {
            .el-card {
              width: 15rem;
              height: 15rem;
              .el-card__body {
                img {
                  width: 15rem;
                  height: 15rem;
                }
              }
            }
          }
        }
      }
      .priceIndex {
        margin-bottom: 20px;
        position: relative;
        .select-wrap {
          z-index: 2000;
          position: absolute;
          top: 20px;
          right: 50px;
        }
        #priceIndex {
          height: 500px;
        }
      }
    }
  }
  .retailer {
    a {
      color: $base !important;
      text-decoration: underline $base;
      cursor: pointer;
    }
  }
}
</style>
